<template>
    <div id="submit">
        <form>
            <table style="position:relative; margin:auto; top:50px;" cellspacing="25" cellpadding="5">
                <tr>
                    <td class="title"><p class="title_content">话题*</p></td>
                    <td><input class="input_text" type="text" placeholder="请输入您的话题"/></td>
                </tr>
                <tr>
                    <td class="title"><p class="title_content">类别*</p></td>
                    <td>
                        <select style="width: 100px; height: 30px; font-size: 14px">
                            <option>文学</option>
                            <option>音乐</option>
                            <option>计算机</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="title"><p class="title_content">描述*</p></td>
                    <td><input class="input_text" placeholder="请输入你的描述"/></td>
                </tr>

                <tr>
                    <td class="title"><p class="title_content">图片</p></td>
                    <td>
                        <input @change="imgChange($event)" id="back_img" style="margin-top:0px; margin-left:0px" type="file" accept="image/*"/>
                    </td>
                </tr>
                <tr>
                    <td class="title"></td>
                    <td>
                        <div style="width:400px; height: 300px; border: 1px black solid; background-color:white" >
                            <img width="400px" height= "300px" ref="img_prev"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title"><p class="title_content">视频</p></td>
                    <td>
                        <input @change="mvChange($event)" id="back_video" style="margin-top:0px; margin-left:0px" type="file" accept="video/*"/>
                    </td>
                </tr>
                <tr>
                    <td class="title"></td>
                    <td>
                        <div style="width:400px; height: 300px; border: 1px black solid; background-color:white" >
                            <video ref="mv_prev_play" width="400px" height= "300px" controls autoplay name="media">
                            </video>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="title"><p class="title_content">权限*</p></td>
                    <td>
                        <input type="radio" style="margin-right:10px; margin-top:0px"/>私有
                        <input type="radio" style="margin-left:30px;margin-right:10px; margin-top:0px"/>公开
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td><input id="sub_but" type="button" value="提交"/></td>
                </tr>

            </table>
        </form>
    </div>
</template>

<script>
export default {
     components:{},
     methods:{
         imgChange(event){
             const self = this;
            var target = event.currentTarget;
            var file = target.files[0];
            if (window.FileReader) {    
                var reader = new FileReader();    
                reader.readAsDataURL(file);    
                //监听文件读取结束后事件    
                reader.onloadend = function (e) {
                    console.log(self.$refs.img_prev);
                    self.$refs.img_prev.src = e.target.result;
                    console.log(e.target.result);
                };    
            } 
        },
        mvChange(event){
            const self = this;
            var target = event.currentTarget;
            var file = target.files[0];
            console.log(window.URL.createObjectURL(file));
            self.$refs.mv_prev_play.src = window.URL.createObjectURL(file);
        }
     }
}
</script>

<style>
    #submit{
        margin:auto;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: -webkit-paged-y;
    }
    tr td{
        height: 40px;
    }
    .title{
        font-size: 18px;
        text-align: left;
    }
    .title_content{
        margin-right: 30px;
        margin-top: 0px;
    }
    .input_text{
        height: 40px;
        width: 500px;
        font-size: 18px;
        letter-spacing: 2px; 
        text-indent: 3px;
        margin: 0px;
        padding: 0px;
    }
    #sub_but{
        width: 160px;
        height: 40px;
        border: 0px;
        margin-bottom: 40px;
        background-color: cadetblue;
    }
</style>

